<template>
<!--    <div class="mt30">应急避难场所</div>-->
    <div style="position: relative;height: 100%;">
      <!--地图模块-->
      <Index v-if="showBool" :dataType="dataType" :formSqlFilter="formSqlFilter" :drawGeomType="drawGeomType"
             @getDrawGeom="getDrawGeom" @getAddress="getAddress"
             :queryParams="queryParams" :queryFlag="queryFlag" @returnQueryFlag="returnQueryFlag"></Index>
      <!-- 搜索模块 -->
              <!-- 搜索 -->
              <div class="searchIpt">
                <div class="ipt">
                  <el-input v-model="queryParams.bncsmc" placeholder="请输入避难场所名称" style="width: 250px;" ></el-input>
                  <span class="searchStyle" @click="handleQuery">搜索</span>
                </div>
                <div v-if="openSearch" class="openSearchIpt">
                    <el-radio-group v-model="queryParams.type" @change="drawGeomTypeChange">
                      <el-radio :label="1">圈选</el-radio>
                      <el-radio :label="2">框选</el-radio>
                      <el-radio :label="3">多边形</el-radio>
                      <el-radio :label="4">行政区划</el-radio>
                    </el-radio-group>
                    <el-divider border-style="dashed" />
                    <el-row>
                        <el-col>
                            <el-select v-model="queryParams.province" placeholder="所在省" @change="chooseProvince" clearable value-key="id"
                                style="width:200px;">
                                <el-option key="全国级" label="全国" value="全国级"></el-option>
                                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col style="margin:10px 0px;">
                            <el-select v-model="queryParams.city" placeholder="所在市" @change="chooseCity"
                                style="width:200px;;" value-key="id" clearable :disabled="queryParams.province=='全国级'">
                                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col>
                            <el-select v-model="queryParams.county" placeholder="所在区/县" @change="chooseCounty" style="width:200px;"
                                value-key="id" clearable :disabled="queryParams.province=='全国级'">
                                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <p class="titleSearch">场所级别</p>
                    <el-radio-group v-model="queryParams.shelterClass">
                      <el-radio label="1">Ⅰ类</el-radio>
                      <el-radio label="2">Ⅱ类</el-radio>
                      <el-radio label="3">Ⅲ类</el-radio>
                      <el-radio label="4">Ⅳ类</el-radio>
                    </el-radio-group>
                    <p class="titleSearch">容纳人数（人）</p>
                    <el-radio-group v-model="queryParams.poprefRadioType" @change="changePoprefRadioType">
                      <el-radio label="1">1000以下</el-radio>
                      <el-radio label="2">1000-4999</el-radio>
                      <el-radio label="3">5000-9999</el-radio>
                      <el-radio label="4">1万-1.5万</el-radio>
                      <el-radio label="5">1.5万以上</el-radio>
                    </el-radio-group>
                    <p class="titleSearch">场所面积（平方米）</p>
                    <el-radio-group v-model="queryParams.areaRadioType" @change="changeAreaRadioType">
                      <el-radio label="1">1000以下</el-radio>
                      <el-radio label="2">1000-5000</el-radio>
                      <el-radio label="3">5000-1万</el-radio>
                      <el-radio label="4">1万-1.5万</el-radio>
                      <el-radio label="5">1.5万以上</el-radio>
                    </el-radio-group>
                    <p style="padding: 0;text-align: center;">
                        <el-button type="primary" @click="submitQuery">搜索</el-button>
                        <el-button @click="resetQuery">重置</el-button>
                    </p>
                </div>
            <div class="bottomIpt">
                <p class="closeSearch" @click="handleOpenSearch">{{openSearch?"搜索条件收起":'搜索条件展开'}}</p>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div class="resultTable">
            <div class="searchResult" @click="handleResult">
                搜索结果
                <el-icon v-if="openResult"><DArrowRight /></el-icon>
                <el-icon v-if="!openResult"><DArrowLeft /></el-icon>
            </div>
            <div class="rightResult" v-if="openResult">
                <p class="titleResult">数据信息已查( {{total}} )条</p>
                <el-table :data="dataList" height="500" stripe style="width:600px" v-loading="loading">
                    <el-table-column label="序号" width="60px" align="center">
                        <template #default="scope">
                            <span>{{ (queryParams.page - 1) * queryParams.rows + scope.$index + 1 }}</span>
                        </template>                  
                    </el-table-column>
                    <el-table-column property="bncsmc" label="名称"></el-table-column>
                    <el-table-column property="location" label="地址"></el-table-column>
                    <el-table-column label="操作" align="center" width="90" class-name="small-padding fixed-width">
                      <template #default="scope">
                        <el-button type="text" @click="findDetailById(scope.row.jesId)">详情</el-button>
                      </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
                            :pager-count="3" @pagination="getListPage" />
            </div>
        </div>

      <!--数据详情-->
      <el-dialog title="详细信息" v-model="openDialog" append-to-body width="800px">
        <p style="text-align: center;font-weight: bold;font-size: 16px;"> {{detailData.bncsmc}}</p>
        <el-form ref="detailRef" :model="detailData" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所在地区：" prop="province">
                {{detailData.province}}{{detailData.city}}{{detailData.county}}{{detailData.town}}{{detailData.village}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经度：" prop="jesLongitude">
                {{detailData.jesLongitude}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="场所地址：" prop="location">
                {{detailData.location}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纬度：" prop="jesLatitude">
                {{detailData.jesLatitude}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="场所类别：" prop="shelterClass">
                {{getShelterClass(detailData.shelterClass)}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建成时间：" prop="jcsj">
                {{detailData.jcsj}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="场所级别：" prop="category">
                {{getCategory(detailData.category)}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有无应急保障设备：" prop="sign">
                {{getSign(detailData.sign)}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="容纳人数：" prop="popref">
                {{detailData.popref}}人
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="应急保障设备个数：" prop="numEq">
                {{detailData.numEq}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="场所面积：" prop="area">
                {{detailData.area}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!--<el-form-item label="场所类型：" prop="type">
                {{detailData.type}}
              </el-form-item>-->
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
</template>

<script setup name="emergencyShelter">
//地图
import Index from '@/map/informationRetrieval/emergencyShelter/index.vue';
import { getLatestVersion,getPage,findById } from '@/api/informationRetrieval/emergencyShelter.js';
import { getProvince, getChildArea } from "@/api/system/division";
const openSearch = ref(false);
const openResult = ref(false);

const { proxy } = getCurrentInstance();
const loading = ref(false);
const dataList = ref([]);
const total = ref(0);
const detailData = ref({});//详细信息
const openDialog = ref(false);

const provinceData=ref([]); 
const cityData=ref([]);
const areaData=ref([]);

const data = reactive({
  queryParams: {
    page: 1,
    rows: 10,
    dataVersion: null,//版本号
    bncsmc: null,//避难场所名称
    province:null,//省名称
    city:null,//市名称
    county:null,//县名称
    shelterClass:null,//场所级别1-4
    poprefRadioType:null,//容纳人数（人）范围1-5代表: 1000以下、1000-4999、5000-9999、1万-1.5万、1.5万以上
    poprefMax:null,//最大容纳人数
    poprefMin:null,//最小容纳人数
    areaRadioType:null,//场所面积（平方米）范围1-5代表: 1000以下、1000-5000、5000-1万、1万-1.5万、1.5万以上
    areaMax: null,//最大面积
    areaMin: null,//最小面积
    geom: null,//地图圈选空间数据
  },
  latestDataVersion:null,//最新版本号
  formSqlFilter: null,//查询图层过滤条件
})
const { queryParams,latestDataVersion,formSqlFilter } = toRefs(data);

//类型
const dataType = ref("csbncs");//城市避难场所
const showBool = ref(false);

// 打开与收起搜索
const handleOpenSearch=()=>{
    proxy.resetForm("queryForm");
    openSearch.value = !openSearch.value;
    console.log(queryParams.value)
}
// 搜索
const handleQuery = ()=>{
    queryParams.value.page=1;
    let name = queryParams.value.bncsmc;
    resetQuery();//重置
    queryParams.value.bncsmc = name;
    getListPage();
    //名称查询超图图层
    nameQueryLayer();
}
// 点击查看结果数据
const handleResult =()=>{
    openResult.value = !openResult.value;
}
// 重置
const resetQuery = ()=>{
    queryParams.value={
      page: 1,
      rows: 10,
      // dataVersion: null,//版本号
      bncsmc: null,//避难场所名称
      province:null,//省名称
      city:null,//市名称
      county:null,//县名称
      shelterClass:null,//场所级别1-4
      poprefRadioType:null,//容纳人数（人）范围1-5代表: 1000以下、1000-4999、5000-9999、1万-1.5万、1.5万以上
      poprefMax:null,//最大容纳人数
      poprefMin:null,//最小容纳人数
      areaRadioType:null,//场所面积（平方米）范围1-5代表: 1000以下、1000-5000、5000-1万、1万-1.5万、1.5万以上
      areaMax: null,//最大面积
      areaMin: null,//最小面积
      geom: null,//地图圈选空间数据
    };
    drawGeomType.value = "清空";
}

//获取最新版本号
function getDataVersion(){
  getLatestVersion().then(response => {
    console.log(response)
    if(response.data){
      latestDataVersion.value = response.data.versionCode;
    }
    //test
    // latestDataVersion.value = "JC01YJZB20230118014";
    // showBool.value = true;
    handleQuery();
  }).catch(() => {
    //test
    // latestDataVersion.value = "JC01YJZB20230118014";
    // showBool.value = true;
  });
}

//查询数据列表分页
function getListPage() {
  loading.value = true;
  queryParams.value.dataVersion = latestDataVersion.value;
  getPage({ ...queryParams.value }).then(response => {
    console.log(response.data);
    dataList.value = response.data.rows ? response.data.rows : [];
    total.value = response.data.total;
    loading.value = false;
    openResult.value = true;
  });
}

//根据id查询详情
function findDetailById(id) {
  loading.value = true;
  findById(id).then(response => {
    console.log(response.data);
    detailData.value = response.data;
    loading.value = false;
    openDialog.value = true;
  });
}

//单选选择容纳人数(人）
function changePoprefRadioType(value){
  // poprefRadioType:"1",//容纳人数（人）范围1-5代表: 1000以下、1000-4999、5000-9999、1万-1.5万、1.5万以上
  // poprefMax:null,//最大容纳人数
  // poprefMin:null,//最小容纳人数
  if(value=="1"){
    queryParams.value.poprefMin = null;
    queryParams.value.poprefMax = 1000;
  }else if(value=="2"){
    queryParams.value.poprefMin = 1000;
    queryParams.value.poprefMax = 4999;
  }else if(value=="3"){
    queryParams.value.poprefMin = 5000;
    queryParams.value.poprefMax = 9999;
  }else if(value=="4"){
    queryParams.value.poprefMin = 10000;
    queryParams.value.poprefMax = 15000;
  }else if(value=="5"){
    queryParams.value.poprefMin = 15000;
    queryParams.value.poprefMax = null;
  }
}

//单选选择场所面积（平方米）
function changeAreaRadioType(value){
  // areaRadioType:"1",//场所面积（平方米）范围1-5代表: 1000以下、1000-5000、5000-1万、1万-1.5万、1.5万以上
  // areaMax: null,//最大面积
  // areaMin: null,//最小面积
  if(value=="1"){
    queryParams.value.areaMin = null;
    queryParams.value.areaMax = 1000;
  }else if(value=="2"){
    queryParams.value.areaMin = 1000;
    queryParams.value.areaMax = 5000;
  }else if(value=="3"){
    queryParams.value.areaMin = 5000;
    queryParams.value.areaMax = 10000;
  }else if(value=="4"){
    queryParams.value.areaMin = 10000;
    queryParams.value.areaMax = 15000;
  }else if(value=="5"){
    queryParams.value.areaMin = 15000;
    queryParams.value.areaMax = null;
  }
}

//地图圈选类型
const drawGeomType = ref("");
//选择地图圈选类型
function drawGeomTypeChange(value){
  if(value=="1"){
    drawGeomType.value = "圈选";
  }else if(value=="2"){
    drawGeomType.value = "框选";
  }else if(value=="3"){
    drawGeomType.value = "多边形";
  }else if(value=="4"){
    drawGeomType.value = "行政区划";
  }
}

//地图圈选空间数据
function getDrawGeom(geom){
  queryParams.value.geom = geom;
  console.log(geom);
  submitQuery();
}

//获取地图点击位置行政区划地址信息
function getAddress(obj){
  if(obj.province){
    queryParams.value.province = obj.province;//省
    queryParams.value.city = "";
    queryParams.value.county = "";
    queryParams.value.geom = "";
    submitQuery();
  }
}

//名称查询超图图层
function nameQueryLayer(){
  let sqlFilter = "";
  let dataVersion = queryParams.value.dataVersion;
  if(dataVersion){
    sqlFilter = "data_version='"+dataVersion+"' and del_flag='0'";
    let bncsmc = queryParams.value.bncsmc;
    if(bncsmc){
      sqlFilter += " and bncsmc like '%"+bncsmc+"%'";
    }
    formSqlFilter.value = sqlFilter;
  }else{
    proxy.$modal.msgWarning("无版本数据");
  }
}

//是否开始省市县查询定位
const queryFlag = ref(false);
//完成省市县定位
const returnQueryFlag = ()=>{
  //完成省市县查询定位
  queryFlag.value = false;
}

//确定查询
function submitQuery(){
  //开始省市县查询定位
  queryFlag.value = true;
  queryParams.value.page=1;
  getListPage();
  let sqlFilter = "";
  let dataVersion = queryParams.value.dataVersion;
  if(dataVersion){
    sqlFilter = "data_version='"+dataVersion+"' and del_flag='0'";
    let bncsmc = queryParams.value.bncsmc;
    if(bncsmc){//避难场所名称
      sqlFilter += " and bncsmc like '%"+bncsmc+"%'";
    }
    let province = queryParams.value.province;
    if(province){//省名称
      sqlFilter += " and province='"+province+"'";
    }
    let city = queryParams.value.city;
    if(city){//市名称
      sqlFilter += " and city='"+city+"'";
    }
    let county = queryParams.value.county;
    if(county){//县名称
      sqlFilter += " and county='"+county+"'";
    }
    let shelterClass = queryParams.value.shelterClass;
    if(shelterClass){//场所级别1-4
      sqlFilter += " and shelter_class='"+shelterClass+"'";
    }
    //容纳人数（人）
    let poprefMax = queryParams.value.poprefMax;
    if(poprefMax){//最大容纳人数
      sqlFilter += " and popref<="+poprefMax;
    }
    let poprefMin = queryParams.value.poprefMin;
    if(poprefMin){//最小容纳人数
      sqlFilter += " and popref>"+poprefMin;
    }
    //场所面积（平方米）
    let areaMax = queryParams.value.areaMax;
    if(areaMax){//最大面积
      sqlFilter += " and area<="+areaMax;
    }
    let areaMin = queryParams.value.areaMin;
    if(areaMin){//最小面积
      sqlFilter += " and area>"+areaMin;
    }
    //空间数据
    let geom = queryParams.value.geom;
    if(geom){//空间数据wkt
      sqlFilter += " and st_intersects(st_geomfromtext('"+geom+"',4490), geom)";
    }
    //sql过滤条件
    formSqlFilter.value = sqlFilter;
  }else{
    proxy.$modal.msgWarning("无版本数据");
  }
}

function getShelterClass(value){
  if(value=="1"){
    value = "Ⅰ（1）";
  }else if(value=="2"){
    value = "Ⅱ（2）";
  }else if(value=="3"){
    value = "Ⅲ（3）";
  }else if(value=="4"){
    value = "Ⅳ（4）";
  }
  return value;
}

function getCategory(value){
  if(value=="0"){
    value = "短期";
  }else if(value=="1"){
    value = "暂时";
  }else if(value=="2"){
    value = "中长期";
  }
  return value;
}

function getSign(value){
  if(value=="0"){
    value = "无";
  }else if(value=="1"){
    value = "有";
  }
  return value;
}

/** 获取省列表 */
function getProvinceData() {
    getProvince().then((response) => {
        provinceData.value = response.data;
    });
}
function chooseProvince(value) {
    console.log(value);
    queryParams.value.city = null;
    queryParams.value.county = null;
    queryParams.value.province = value=='全国级'?value:value.name;
    cityData.value = [];
    areaData.value = [];
    if(value=='全国级'){
        return;
    }
    getChildArea(value.id).then(response => {
        cityData.value = response.data;
    });
}
function chooseCity(value) {
    queryParams.value.city = value.name;
    queryParams.value.county = null;
    areaData.value = [];
    getChildArea(value.id).then((response) => {
        areaData.value = response.data;
    });
}
function chooseCounty(value) {
    queryParams.value.county = value.name;
}

onMounted(() => {
  getProvinceData();
  getDataVersion();
  showBool.value = true;
})
</script>

<style scoped lang="scss">
:deep(.el-radio__label) {
  color:#FFFFFF;
}
// 搜索弹框样式
.searchIpt{
    position:absolute;
    width: 380px;
    border-radius: 8px;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    .ipt{
        border-radius: 8px;
        padding: 10px 20px;
        background-color: rgba(0, 0, 0, 0.44);
        .searchStyle{
            margin-left: 18px;
            display: inline-block;
            cursor: pointer;
            color: #fff;
            font-weight: bold;
        }
    }
    .openSearchIpt{
        :deep(.el-divider--horizontal){
            margin: 10px 0px 20px!important;
        }
        .titleSearch{
            margin-bottom: 0px;
            color: #fff;
            font-size: 16px;
            font-weight: 400;
        }
        padding: 0px 20px;
    }
    .bottomIpt{
        padding: 0px 20px;
        background-color: rgba(0, 0, 0, 0.44);
        border-radius: 8px;
        .closeSearch{
            padding: 0;
            margin: 10px auto;
            color: yellow;
            text-align: center;
            cursor:pointer;
        }
    }
}
.resultTable{
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: row;
    .searchResult{
    width: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0px;
    left: -40px;
    font-size: 16px;
    font-weight: bold;
    color: yellow;
    padding: 10px;
    border-radius: 2px;
      cursor:pointer;
}
.rightResult{
    padding:0px 20px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    .titleResult{
        color: yellow;
        font-weight: bold;
        font-size: 18px;
        text-align: center;
    }
}
}
</style>